<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const dialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
    name: '',
    alias: ''
});
const props = defineProps({
    channels:{ type: Array, required:true }
});
const emit = defineEmits(['handleForm','success'])
const rules = {
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    alias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ]
};

let isEditMode = false;
let originalRow = null;


const open = ({ row }) => {
  dialogVisible.value = true;
  isEditMode = !!row;
  
  // 新增：清除表单之前的校验状态
  if (formRef.value) {
    formRef.value.clearValidate();
  }

  if (isEditMode) {
    form.value = { ...row };
    originalRow = { ...row };
  } else {
    form.value = { name: '', alias: '' };
    originalRow = null;
  }
};

const handleDialogClose = () => {
  form.value = { name: '', alias: '' };
  if (formRef.value) {
    formRef.value.clearValidate();
  }
  isEditMode = false;
  originalRow = null;
};

const onSubmit = async() => {
    try{
        await formRef.value.validate();
        emit('handleForm',{formData:{...form.value},isEdit:isEditMode,originalRow})
        dialogVisible.value = false;
        ElMessage.success(isEditMode?'编辑成功！':'添加成功！');
        emit('success');}
    catch(error){
        ElMessage.error('请检查表单输入是否正确！');}
};

defineExpose({ open });
</script>

<template>
    <el-dialog
        :title="isEditMode?'编辑分类':'添加分类'"
        v-model="dialogVisible"
        width="500"
        @close="handleDialogClose">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="alias">
                <el-input v-model="form.alias" placeholder="请输入分类别名"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>